<template>
  <view>
    <form @submit="saveUser">
      <view class="line">
        <view class="left">头像</view>
        <view class="right">
          <button open-type="chooseAvatar" class="btnAvatar" @chooseavatar="chooseavatar">
            <image class="avatar" :src="formData.avatar"></image>
            <view class="arrow"></view>
          </button>

        </view>
      </view>
      <view class="line">
        <view class="left">昵称</view>
        <view class="right">
          <input type="nickname" name="nickname" :value="formData.nickname" />
          <view class="arrow"></view>
        </view>
      </view>
      <view class="line">
        <view class="left">真实姓名</view>
        <view class="right">
          <input type="text" name="name" :value="formData.name" />
          <view class="arrow"></view>
        </view>
      </view>
      <view class="line">
        <view class="left">手机号码</view>
        <view class="right">
          <input type="text" name="mobile" :value="formData.mobile" />
          <view class="arrow"></view>
        </view>
      </view>
      <view class="btnLogin">
        <button type="primary" form-type="submit">立即保存</button>
      </view>
    </form>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        // 表单数据
        formData: {}
      };
    },
    onLoad() {
      this.initData()
    },
    methods: {
      // 获取数据
      async initData() {
        this.formData = await uni.$http.get('/user/profile')
      },
      // 保存
      async saveUser(event) {
        console.log(event.detail.value)
        // 发生更新数据
        let res = await uni.$http.post('/user/update', {
          ...event.detail.value, // 获取表单数据
          avatar: this.formData.avatar // 头像加入
        })
        // 更新vuex中
        this.$store.commit('user/setUserInfo', res)
        // 提示成功
        uni.showToast({
          title: '更新成功',
          icon: 'none'
        })
      },
      // 获取头像
      chooseavatar(event) {
        // 1.获取到头像临时路径event.detail.avatarUrl获取到头像的临时路径【临时的，会失效的】
        console.log(event.detail.avatarUrl);
        // 关于此问题：https://developers.weixin.qq.com/community/develop/doc/0006a858c78b382120feb83f056c00?jumpto=comment&commentid=000caa0f3f08b83128fe5b3935b0
        // 2.TODO：将这个临时路径的图片上传到自己的服务器保存起来，返回自己服务器的保存地址【保存自己的服务器，永久存在】
        // 没有办法做的，这个项目后端没有提供上传接口
        // uni.uploadFile()实现将临时路径的图片资源上传到自己的服务器
        // uniApp中通过uni.uploadFile()来实现上传文件！
        // https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html
        /*
        wx.uploadFile({
              url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
              filePath: event.detail.avatarUrl, //临时路径
              name: 'file',
              formData: {
                'user': 'test'
              },
              success (res){
                // 获取到真实的存储在我们后端服务器上面的地址
                const data = res.data
                //do something
              }
            })
        */
        // 3.将头像地址存储到formData里面去
        this.formData.avatar = event.detail.avatarUrl // 真实工作里面，应该是94行回调那里的真实服务器地址
      },
    }
  }
</script>

<style lang="scss" scoped>
  .line {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    line-height: 88rpx;
    padding: 0 30rpx;
    align-items: center;

    .right {
      height: 80rpx;
      display: flex;
      align-items: center;
    }

    .arrow {
      border-top: 1px solid #aaa;
      border-right: 1px solid #aaa;
      width: 20rpx;
      height: 20rpx;
      transform: rotateZ(45deg);
    }

    input {
      text-align: right;
      width: 240rpx;
    }
  }

  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }

  .btnAvatar {
    background-color: #fff;
    width: 100%;
    display: block;
    padding: 0;
    height: 80rpx;
    border: none;
    border-radius: 0;
  }

  .btnLogin {
    margin: 40rpx;
  }
</style>
